@charset "UTF-8";
html {
  position: fixed;
  height: 100%;
  width: 100%; }

body {
  overflow: hidden; }

.resetLeft {
  left: 0 !important;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-animation: move1 1s ease-in-out;
  animation: move1 1s ease-in-out; }

.removePage {
  left: -100% !important;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-animation: move2 1s ease-out;
  animation: move2 1s ease-out; }

@-webkit-keyframes move1 {
  0% {
    -webkit-transform: scale(0) rotate(0);
    transform: scale(0) rotate(0); }
  100% {
    -webkit-transform: scale(1) rotate(360deg);
    transform: scale(1) rotate(360deg); } }

@keyframes move1 {
  0% {
    -webkit-transform: scale(0) rotate(0);
    transform: scale(0) rotate(0); }
  100% {
    -webkit-transform: scale(1) rotate(360deg);
    transform: scale(1) rotate(360deg); } }

@-webkit-keyframes move2 {
  0% {
    -webkit-transform: scale(0.8) rotate(360deg);
    transform: scale(0.8) rotate(360deg); }
  100% {
    -webkit-transform: scale(0) rotate(0);
    transform: scale(0) rotate(0); } }

@keyframes move2 {
  0% {
    -webkit-transform: scale(0.8) rotate(360deg);
    transform: scale(0.8) rotate(360deg); }
  100% {
    -webkit-transform: scale(0) rotate(0);
    transform: scale(0) rotate(0); } }

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1; }
  25%,
  75% {
    opacity: 0; } }

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1; }
  25%,
  75% {
    opacity: 0; } }

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% {
    -webkit-transform: skewX(0.39063deg) skewY(0.39063deg);
    transform: skewX(0.39063deg) skewY(0.39063deg); }
  88.8% {
    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
    transform: skewX(-0.19531deg) skewY(-0.19531deg); } }

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% {
    -webkit-transform: skewX(0.39063deg) skewY(0.39063deg);
    transform: skewX(0.39063deg) skewY(0.39063deg); }
  88.8% {
    -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg);
    transform: skewX(-0.19531deg) skewY(-0.19531deg); } }

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); }
  50% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1); }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1); } }

#web {
  width: 100%;
  height: 100%;
  /* 加载页 */
  /* 开始首页 */
  /* 选项页 */
  /* 背景页2 */
  /* 背景3 */
  /* 背景页1 */
  /* 背景4 */
  /* 背景5 */
  /* 背景6 */
  /* 结束页 */
  /* 分享页 */
  /* 惊喜图片1 */ }
  #web > img {
    width: 100%;
    height: 100%; }
  #web #loadPage {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #4f4f4f;
    overflow: hidden;
    z-index: 1999; }
    #web #loadPage > img {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0; }
    #web #loadPage .earth {
      position: absolute;
      bottom: -0.25rem;
      right: 0;
      text-align: right; }
      #web #loadPage .earth > img {
        width: 58%; }
    #web #loadPage .protag {
      position: absolute;
      bottom: 3.5rem;
      text-align: center;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      height: 25rem; }
      #web #loadPage .protag > img {
        height: 100%; }
    #web #loadPage .arrow {
      position: absolute;
      left: 50%;
      bottom: 4.5rem;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      width: 3.5rem;
      text-align: center; }
      #web #loadPage .arrow > img {
        width: 100%; }
    #web #loadPage .please {
      position: absolute;
      left: 50%;
      bottom: 0;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      height: 5rem;
      -webkit-animation: runM 1s;
      animation: runM 1s; }
      #web #loadPage .please > img {
        height: 100%; }
    #web #loadPage .loading {
      position: absolute;
      left: 2%;
      bottom: 0;
      font-size: 0.75rem;
      color: white; }
      #web #loadPage .loading > p {
        margin-bottom: 1.25rem; }
  #web #homePage {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    overflow: hidden; }
    #web #homePage > img {
      width: 100%;
      height: 100%;
      -webkit-animation: rot 3s linear infinite;
      animation: rot 3s linear infinite; }
    #web #homePage .kugouLogo {
      position: absolute;
      top: 2%;
      right: 2%; }
      #web #homePage .kugouLogo > img {
        height: 1.75rem; }
    #web #homePage .secguess {
      position: absolute;
      top: 2.75rem;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      z-index: 99;
      height: 8.75rem; }
      #web #homePage .secguess > img {
        height: 100%; }

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }
    #web #homePage .mouth {
      position: absolute;
      top: 10.875rem;
      left: 50%;
      height: 9.5rem;
      width: 100%;
      text-align: center;
      -webkit-animation: runM 1s infinite;
      animation: runM 1s infinite;
      -webkit-transition: all 1s linear;
      transition: all 1s linear; }
      #web #homePage .mouth > img:nth-of-type(1) {
        height: 100%; }
      #web #homePage .mouth > img:nth-of-type(2) {
        height: 50%;
        position: absolute;
        top: 2.5rem;
        left: 6.7rem; }

@-webkit-keyframes runM {
  0% {
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1); }
  50% {
    -webkit-transform: translateX(-50%) scale(1.2);
    transform: translateX(-50%) scale(1.2); }
  100% {
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1); } }

@keyframes runM {
  0% {
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1); }
  50% {
    -webkit-transform: translateX(-50%) scale(1.2);
    transform: translateX(-50%) scale(1.2); }
  100% {
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1); } }
    #web #homePage .man {
      position: absolute;
      width: 100%;
      bottom: 5rem;
      height: 11.5rem;
      padding-left: 0.625rem; }
      #web #homePage .man > img {
        height: 100%; }
      #web #homePage .man > img:nth-of-type(1) {
        position: absolute;
        bottom: 3rem;
        height: 80%;
        -webkit-animation: whatRun 1s infinite;
        animation: whatRun 1s infinite; }
      #web #homePage .man > img:nth-of-type(3) {
        position: absolute;
        bottom: -1rem; }
      #web #homePage .man .what {
        position: absolute;
        height: 18%; }
      #web #homePage .man .w1 {
        right: 1rem;
        bottom: 7rem; }
      #web #homePage .man .w2 {
        right: 1rem;
        bottom: 3.375rem; }
      #web #homePage .man .w3 {
        right: 8.25rem;
        bottom: 7rem; }
      #web #homePage .man .w4 {
        right: 8.25rem;
        bottom: 3.375rem; }

@-webkit-keyframes whatRun {
  0%, 100% {
    -webkit-transform: rotateZ(2deg);
    transform: rotateZ(2deg); }
  50% {
    -webkit-transform: rotateZ(-2deg);
    transform: rotateZ(-2deg); } }

@keyframes whatRun {
  0%, 100% {
    -webkit-transform: rotateZ(2deg);
    transform: rotateZ(2deg); }
  50% {
    -webkit-transform: rotateZ(-2deg);
    transform: rotateZ(-2deg); } }
    #web #homePage .startBtn {
      position: absolute;
      bottom: 2.25rem;
      left: 50%;
      height: 3.5rem;
      -webkit-animation: tada 1s infinite;
      animation: tada 1s infinite;
      width: 100%;
      text-align: center; }
      #web #homePage .startBtn > img {
        height: 100%; }

@-webkit-keyframes tada {
  from {
    -webkit-transform: translateX(-50%) scale3d(1, 1, 1);
    transform: translateX(-50%) scale3d(1, 1, 1); }
  10%,
  20% {
    -webkit-transform: translateX(-50%) scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: translateX(-50%) scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-50%) scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: translateX(-50%) scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%,
  60%,
  80% {
    -webkit-transform: translateX(-50%) scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: translateX(-50%) scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: translateX(-50%) scale3d(1, 1, 1);
    transform: translateX(-50%) scale3d(1, 1, 1); } }

@keyframes tada {
  from {
    -webkit-transform: translateX(-50%) scale3d(1, 1, 1);
    transform: translateX(-50%) scale3d(1, 1, 1); }
  10%,
  20% {
    -webkit-transform: translateX(-50%) scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: translateX(-50%) scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-50%) scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: translateX(-50%) scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%,
  60%,
  80% {
    -webkit-transform: translateX(-50%) scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: translateX(-50%) scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to {
    -webkit-transform: translateX(-50%) scale3d(1, 1, 1);
    transform: translateX(-50%) scale3d(1, 1, 1); } }
  #web #selectPage {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 200%;
    overflow: hidden;
    z-index: 9999; }
    #web #selectPage > audio {
      display: none; }
    #web #selectPage .samllM {
      position: absolute;
      bottom: 7.5rem;
      height: 2.5rem;
      width: 100%; }
      #web #selectPage .samllM > img {
        height: 100%;
        right: 1rem;
        position: absolute;
        -webkit-animation: runSamllM 1s linear infinite;
        animation: runSamllM 1s linear infinite; }
      #web #selectPage .samllM > span {
        height: 100%;
        right: 1.5rem;
        bottom: -0.625rem;
        font-size: 0.875rem;
        font-weight: bold;
        position: absolute;
        -webkit-animation: runSamllM 1s linear infinite;
        animation: runSamllM 1s linear infinite; }

@-webkit-keyframes runSamllM {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); } }

@keyframes runSamllM {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); } }
    #web #selectPage .a, #web #selectPage .b, #web #selectPage .c {
      position: absolute;
      bottom: 7rem;
      height: 2.5rem;
      width: 75%;
      padding-left: 1rem; }
      #web #selectPage .a > img, #web #selectPage .b > img, #web #selectPage .c > img {
        width: 100%;
        height: 100%; }
      #web #selectPage .a > span, #web #selectPage .b > span, #web #selectPage .c > span {
        position: absolute;
        left: 4.5rem;
        bottom: 0.75rem; }
    #web #selectPage .b {
      bottom: 4rem; }
    #web #selectPage .c {
      bottom: 1rem; }
  #web #bg2, #web #bg3, #web #bg4, #web #bg5 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 300%;
    overflow: hidden; }
    #web #bg2 > img, #web #bg3 > img, #web #bg4 > img, #web #bg5 > img {
      width: 100%;
      height: 100%;
      -webkit-animation: rot 3s linear infinite;
      animation: rot 3s linear infinite; }

@-webkit-keyframes rot {
  0% {
    -webkit-transform: scale(3) rotate(0deg);
    transform: scale(3) rotate(0deg); }
  100% {
    -webkit-transform: scale(3) rotate(360deg);
    transform: scale(3) rotate(360deg); } }

@keyframes rot {
  0% {
    -webkit-transform: scale(3) rotate(0deg);
    transform: scale(3) rotate(0deg); }
  100% {
    -webkit-transform: scale(3) rotate(360deg);
    transform: scale(3) rotate(360deg); } }
    #web #bg2 .lightearth, #web #bg3 .lightearth, #web #bg4 .lightearth, #web #bg5 .lightearth {
      position: absolute;
      top: 0;
      height: 5.5rem;
      width: 100%;
      text-align: center; }
      #web #bg2 .lightearth > img, #web #bg3 .lightearth > img, #web #bg4 .lightearth > img, #web #bg5 .lightearth > img {
        height: 100%; }
    #web #bg2 .somePic, #web #bg3 .somePic, #web #bg4 .somePic, #web #bg5 .somePic {
      position: absolute;
      width: 100%;
      top: 17rem;
      text-align: center;
      height: 5rem; }
      #web #bg2 .somePic > img, #web #bg3 .somePic > img, #web #bg4 .somePic > img, #web #bg5 .somePic > img {
        height: 100%; }
      #web #bg2 .somePic > img:nth-of-type(2), #web #bg3 .somePic > img:nth-of-type(2), #web #bg4 .somePic > img:nth-of-type(2), #web #bg5 .somePic > img:nth-of-type(2) {
        position: absolute;
        top: -10rem;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        height: 300%; }
      #web #bg2 .somePic > img:nth-of-type(3), #web #bg3 .somePic > img:nth-of-type(3), #web #bg4 .somePic > img:nth-of-type(3), #web #bg5 .somePic > img:nth-of-type(3) {
        position: absolute;
        top: -5.5rem;
        left: 0;
        height: 180%; }
      #web #bg2 .somePic > img:nth-of-type(4), #web #bg3 .somePic > img:nth-of-type(4), #web #bg4 .somePic > img:nth-of-type(4), #web #bg5 .somePic > img:nth-of-type(4) {
        position: absolute;
        top: -9rem;
        left: 0;
        -webkit-animation: pulse 1s linear infinite;
        animation: pulse 1s linear infinite; }
      #web #bg2 .somePic > img:nth-of-type(5), #web #bg3 .somePic > img:nth-of-type(5), #web #bg4 .somePic > img:nth-of-type(5), #web #bg5 .somePic > img:nth-of-type(5) {
        position: absolute;
        top: -5.5rem;
        right: 0;
        height: 180%; }
      #web #bg2 .somePic > img:nth-of-type(6), #web #bg3 .somePic > img:nth-of-type(6), #web #bg4 .somePic > img:nth-of-type(6), #web #bg5 .somePic > img:nth-of-type(6) {
        position: absolute;
        top: -9rem;
        right: 0;
        -webkit-animation: pulse 1s linear infinite;
        animation: pulse 1s linear infinite; }
  #web #bg3, #web #bg4, #web #bg5, #web #bg1 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 400%;
    overflow: hidden; }
    #web #bg3 .circle, #web #bg4 .circle, #web #bg5 .circle, #web #bg1 .circle {
      width: 100%;
      height: 100%;
      overflow: hidden; }
      #web #bg3 .circle .c1, #web #bg3 .circle .c2, #web #bg3 .circle .c3, #web #bg3 .circle .c4, #web #bg3 .circle .c5, #web #bg4 .circle .c1, #web #bg4 .circle .c2, #web #bg4 .circle .c3, #web #bg4 .circle .c4, #web #bg4 .circle .c5, #web #bg5 .circle .c1, #web #bg5 .circle .c2, #web #bg5 .circle .c3, #web #bg5 .circle .c4, #web #bg5 .circle .c5, #web #bg1 .circle .c1, #web #bg1 .circle .c2, #web #bg1 .circle .c3, #web #bg1 .circle .c4, #web #bg1 .circle .c5 {
        border: 40px solid #4f4f4f;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-animation: run 1s linear infinite;
        animation: run 1s linear infinite; }
      #web #bg3 .circle .c1, #web #bg4 .circle .c1, #web #bg5 .circle .c1, #web #bg1 .circle .c1 {
        width: 100px;
        height: 120px; }
      #web #bg3 .circle .c2, #web #bg4 .circle .c2, #web #bg5 .circle .c2, #web #bg1 .circle .c2 {
        width: 250px;
        height: 270px; }
      #web #bg3 .circle .c3, #web #bg4 .circle .c3, #web #bg5 .circle .c3, #web #bg1 .circle .c3 {
        width: 400px;
        height: 420px; }
      #web #bg3 .circle .c4, #web #bg4 .circle .c4, #web #bg5 .circle .c4, #web #bg1 .circle .c4 {
        width: 550px;
        height: 570px; }
      #web #bg3 .circle .c5, #web #bg4 .circle .c5, #web #bg5 .circle .c5, #web #bg1 .circle .c5 {
        width: 700px;
        height: 720px; }

@-webkit-keyframes run {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg); }
  25% {
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg); }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
    transform: translate(-50%, -50%) rotate(180deg); }
  75% {
    -webkit-transform: translate(-50%, -50%) rotate(270deg);
    transform: translate(-50%, -50%) rotate(270deg); }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg); } }

@keyframes run {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg); }
  25% {
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg); }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
    transform: translate(-50%, -50%) rotate(180deg); }
  75% {
    -webkit-transform: translate(-50%, -50%) rotate(270deg);
    transform: translate(-50%, -50%) rotate(270deg); }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg); } }
    #web #bg3 .watchpeos, #web #bg4 .watchpeos, #web #bg5 .watchpeos, #web #bg1 .watchpeos {
      position: absolute;
      width: 100%;
      top: 3.5rem;
      height: 12rem;
      z-index: 1999; }
      #web #bg3 .watchpeos > img, #web #bg4 .watchpeos > img, #web #bg5 .watchpeos > img, #web #bg1 .watchpeos > img {
        width: 100%;
        height: 100%; }
    #web #bg3 .ban1, #web #bg4 .ban1, #web #bg5 .ban1, #web #bg1 .ban1 {
      position: absolute;
      width: 100%;
      top: 8.5rem;
      height: 9rem;
      z-index: 2999;
      -webkit-animation: banRun1 3s ease-in-out infinite;
      animation: banRun1 3s ease-in-out infinite; }
      #web #bg3 .ban1 > img, #web #bg4 .ban1 > img, #web #bg5 .ban1 > img, #web #bg1 .ban1 > img {
        width: 68%;
        height: 100%; }

@-webkit-keyframes banRun1 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes banRun1 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
    #web #bg3 .wall, #web #bg4 .wall, #web #bg5 .wall, #web #bg1 .wall {
      position: absolute;
      width: 100%;
      top: 14rem;
      height: 9rem; }
      #web #bg3 .wall > img, #web #bg4 .wall > img, #web #bg5 .wall > img, #web #bg1 .wall > img {
        width: 100%;
        height: 100%; }
    #web #bg3 .jianMan, #web #bg4 .jianMan, #web #bg5 .jianMan, #web #bg1 .jianMan {
      position: absolute;
      width: 100%;
      top: 4.5rem;
      height: 18rem;
      text-align: right;
      z-index: 3999; }
      #web #bg3 .jianMan > img, #web #bg4 .jianMan > img, #web #bg5 .jianMan > img, #web #bg1 .jianMan > img {
        height: 100%; }
    #web #bg3 .ban2, #web #bg4 .ban2, #web #bg5 .ban2, #web #bg1 .ban2 {
      position: absolute;
      width: 100%;
      top: 11.25rem;
      height: 9rem;
      text-align: right;
      z-index: 4999;
      -webkit-animation: banRun2 3s ease-in-out infinite;
      animation: banRun2 3s ease-in-out infinite; }
      #web #bg3 .ban2 > img, #web #bg4 .ban2 > img, #web #bg5 .ban2 > img, #web #bg1 .ban2 > img {
        width: 68%;
        height: 100%; }

@-webkit-keyframes banRun2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes banRun2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
    #web #bg3 .feizhao, #web #bg4 .feizhao, #web #bg5 .feizhao, #web #bg1 .feizhao {
      position: absolute;
      width: 100%;
      top: 19rem;
      height: 2rem;
      z-index: 4999; }
      #web #bg3 .feizhao > img, #web #bg4 .feizhao > img, #web #bg5 .feizhao > img, #web #bg1 .feizhao > img {
        height: 100%; }
  #web #bg1 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 200%;
    overflow: hidden;
    z-index: 0; }
    #web #bg1 .moviePeople {
      position: absolute;
      bottom: 10.5rem;
      height: 15rem;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%); }
      #web #bg1 .moviePeople > img {
        height: 100%; }
    #web #bg1 .movieSong {
      position: absolute;
      bottom: 25rem;
      left: 2rem;
      height: 4rem;
      -webkit-animation: flash 3s linear infinite;
      animation: flash 3s linear infinite; }
      #web #bg1 .movieSong > img {
        height: 100%; }
    #web #bg1 .cityWall {
      position: absolute;
      width: 100%;
      bottom: 6rem;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      height: 8rem;
      z-index: 2999; }
      #web #bg1 .cityWall > img {
        width: 100%;
        height: 100%; }
  #web #bg4 {
    left: 500%; }
    #web #bg4 .car, #web #bg4 .hua, #web #bg4 .yao {
      position: absolute;
      width: 100%;
      top: 10rem;
      height: 11rem;
      text-align: center; }
      #web #bg4 .car > img, #web #bg4 .hua > img, #web #bg4 .yao > img {
        height: 100%; }
    #web #bg4 .car {
      -webkit-animation: whatRun 1s infinite;
      animation: whatRun 1s infinite; }
    #web #bg4 .hua {
      height: 5rem;
      text-align: right;
      -webkit-animation: whatRun 1s infinite;
      animation: whatRun 1s infinite; }
    #web #bg4 .yao {
      top: 4rem;
      left: -2rem;
      height: 6rem;
      -webkit-animation: runYao 1s infinite;
      animation: runYao 1s infinite; }

@-webkit-keyframes runYao {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes runYao {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }
  #web #bg5 {
    left: 600%; }
    #web #bg5 .lightearth {
      text-align: right; }
      #web #bg5 .lightearth > img {
        position: absolute;
        right: -4.5rem; }
    #web #bg5 .oldman {
      position: absolute;
      width: 100%;
      top: 4.5rem;
      height: 17rem;
      text-align: center; }
      #web #bg5 .oldman > img {
        height: 100%; }
    #web #bg5 .juhuaL, #web #bg5 .juhuaR {
      position: absolute;
      width: 100%;
      top: 11.5rem;
      height: 6.25rem;
      -webkit-animation: whatRun 1s infinite;
      animation: whatRun 1s infinite; }
      #web #bg5 .juhuaL > img, #web #bg5 .juhuaR > img {
        height: 100%; }
    #web #bg5 .juhuaR {
      text-align: right; }
  #web #bg6 {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 700%;
    overflow: hidden; }
    #web #bg6 > img {
      width: 100%;
      height: 100%; }
    #web #bg6 .wuman {
      position: absolute;
      width: 100%;
      top: 4.5rem;
      height: 15rem;
      text-align: right; }
      #web #bg6 .wuman > img {
        height: 100%; }
    #web #bg6 .boy {
      position: absolute;
      width: 100%;
      top: 9.5rem;
      left: 1rem;
      height: 12rem; }
      #web #bg6 .boy > img {
        height: 100%; }
    #web #bg6 .yongqi {
      position: absolute;
      width: 100%;
      top: 2.5rem;
      left: 1rem;
      height: 7rem;
      -webkit-animation: jello 2s linear infinite;
      animation: jello 2s linear infinite; }
      #web #bg6 .yongqi > img {
        height: 100%; }
  #web #end {
    position: absolute;
    height: 100vh;
    left: 800%;
    overflow: hidden; }
    #web #end > img {
      width: 100%;
      height: 100%; }
    #web #end .user {
      position: absolute;
      top: 0.5rem;
      left: 0.5rem;
      height: 2.5rem; }
      #web #end .user > img:nth-of-type(1) {
        height: 100%; }
      #web #end .user > img:nth-of-type(2) {
        position: absolute;
        top: 0.35rem;
        left: 0.5rem;
        height: 68%; }
      #web #end .user > span {
        position: absolute;
        top: 0.7rem;
        left: 3rem;
        font-size: 0.8rem; }
    #web #end .logo {
      position: absolute;
      top: 1rem;
      right: 0.5rem;
      height: 1.5rem; }
      #web #end .logo > img {
        height: 100%; }
    #web #end .huangjin {
      position: absolute;
      width: 100%;
      top: 2.5rem;
      height: 7rem;
      text-align: center; }
      #web #end .huangjin > img {
        height: 100%; }
    #web #end .info {
      position: absolute;
      width: 100%;
      top: 9.5rem;
      height: 2rem;
      text-align: center; }
      #web #end .info > img {
        height: 100%; }
      #web #end .info > p {
        position: absolute;
        top: 0.5rem;
        left: 7.5rem;
        font-size: 0.8rem; }
        #web #end .info > p > span {
          font-size: 1rem;
          color: goldenrod; }
    #web #end .text {
      position: absolute;
      width: 100%;
      top: 12.5rem;
      height: 3rem;
      text-align: center; }
      #web #end .text > img {
        width: 100%;
        height: 100%; }
      #web #end .text > p {
        position: absolute;
        top: 0.8rem;
        left: 7rem; }
    #web #end .button1 {
      position: absolute;
      top: 16.125rem;
      left: 3rem;
      height: 2rem;
      font-size: 0.8rem; }
      #web #end .button1 > img {
        height: 100%; }
      #web #end .button1 > span {
        position: absolute;
        width: 66%;
        top: 0.25rem;
        left: 1.5rem; }
    #web #end .button2 {
      position: absolute;
      top: 16.125rem;
      right: 3rem;
      height: 2rem;
      font-size: 0.8rem; }
      #web #end .button2 > img {
        height: 100%; }
      #web #end .button2 > span {
        position: absolute;
        width: 66%;
        top: 0.25rem;
        left: 0.3rem; }
    #web #end .title {
      position: absolute;
      width: 100%;
      bottom: 19%;
      height: 3rem;
      text-align: center;
      z-index: 999; }
      #web #end .title > img {
        height: 100%; }
    #web #end .paiming {
      position: absolute;
      width: 100%;
      bottom: 2%;
      height: 6rem;
      text-align: center; }
      #web #end .paiming > img:nth-of-type(1) {
        width: 90%;
        height: 100%; }
      #web #end .paiming > img:nth-of-type(2) {
        position: absolute;
        top: 1rem;
        left: 1.5rem;
        height: 60%; }
    #web #end .front1 {
      height: 5rem;
      background-color: #f3e085;
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
      position: absolute;
      bottom: 4%;
      left: 6rem;
      text-align: center;
      border-radius: 0.5rem;
      z-index: 99; }
      #web #end .front1 > p {
        line-height: 5rem;
        color: red; }
    #web #end .back1 {
      height: 5rem;
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
      position: absolute;
      bottom: 4%;
      left: 6rem; }
      #web #end .back1 > img {
        height: 100%;
        border-radius: 0.5rem; }
    #web #end .front2 {
      height: 5rem;
      background-color: #f3e085;
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
      position: absolute;
      bottom: 4%;
      left: 11.5rem;
      text-align: center;
      border-radius: 0.5rem;
      z-index: 99; }
      #web #end .front2 > p {
        line-height: 5rem;
        color: red; }
    #web #end .back2 {
      height: 5rem;
      -webkit-transform: rotateY(180deg);
      transform: rotateY(180deg);
      position: absolute;
      bottom: 4%;
      left: 11.5rem; }
      #web #end .back2 > img {
        height: 100%;
        border-radius: 0.5rem; }
  #web #share {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 900%;
    z-index: 999999;
    background: black;
    opacity: .8; }
    #web #share .yd {
      position: absolute;
      width: 100%;
      top: 2rem;
      height: 9rem;
      text-align: center; }
      #web #share .yd > img {
        height: 100%; }
  #web #jxPic1 {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 900%;
    z-index: 9999; }
    #web #jxPic1 > img {
      width: 100%;
      height: 100%; }
  #web #jxPic2 {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 900%;
    z-index: 9999; }
    #web #jxPic2 > img {
      width: 100%;
      height: 100%; }
